
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>要素入れ替え</title>
<link href="../jQuery/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sortable1,#sortable2 {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: left;
	margin-right: 10px;
}

#sortable1 li,#sortable2 li {
	margin: 0 5px 5px 5px;
	padding: 5px;
	font-size: 1.2em;
	width: 120px;
}
</style>

<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$("#sortable1, #sortable2").sortable({
			connectWith : [ '.connectedSortable' ],
			placeholder: 'ui-state-highlight', // 移動位置のハイライト
		}).disableSelection();
	});
</script>
</head>
<body>
	<h2>要素入れ替え(list)</h2>
	<p>D&amp;Dで要素の移動</p>
	
	<div class="demo">

		<ul id="sortable1" class="connectedSortable">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
		</ul>

		<ul id="sortable2" class="connectedSortable">
			<li class="ui-state-highlight">Item A</li>
			<li class="ui-state-highlight">Item B</li>
			<li class="ui-state-highlight">Item C</li>
			<li class="ui-state-highlight">Item D</li>
			<li class="ui-state-highlight">Item E</li>
		</ul>

	</div>
</body>
</html>
<!-- see:http://jsajax.com/Articles/jQueryUISortableConnectList/1287 -->